import propTypes from 'prop-types';
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TouchableWithoutFeedback,
  FlatList,
  Image,
  Dimensions,
  ActivityIndicator,
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import CommonStyles from './styles';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import api from './api';
import {AlbumView, Overlay, PullPicker} from 'teaset';
import Toast from 'react-native-easy-toast';
import {Avatar, Divider} from 'react-native-elements';
import Button from 'antd-mobile/lib/button';
import Config from './config';
import util from './util';
import CommentItem from './CommentItem';

const {width, height} = Dimensions.get('window');

class CommentList extends Component {
  static propTypes = {
    data: propTypes.array.isRequired,
    refreshing: propTypes.bool.isRequired,
    loadingMore: propTypes.bool.isRequired,
    onRefresh: propTypes.func.isRequired,
    onEndReached: propTypes.func.isRequired,
    
  }

  renderFooter() {
    if (!this.props.loadingMore) {
      return null;
    }
    return (
      <View style={styles.loadingMore}>
        <ActivityIndicator animating size="large" />
      </View>
    )
  }


  renderItem = ({item, index}) => {
    return (
      <CommentItem item={item} />
    )
  }

  render() {
    return (
      <FlatList
        renderItem = {this.renderItem}
        data={this.props.data}
        refreshing={this.props.refreshing}
        onRefresh={() => this.props.onRefresh()}
        onEndReachedThreshold={0.1}
        onEndReached={(info) => this.props.onEndReached(info)}
        ListFooterComponent={() => this.renderFooter()}
      />
    )
  }
}

var styles = StyleSheet.create({
  sectionTopAction: {
    paddingTop: 24,
    justifyContent: "space-between",
    alignItems: "center",
  },
  pagetTitleLeft: {
    alignSelf: "flex-start"
  },
  sectionHeaderWrapper: {
    paddingBottom: 15,
    marginBottom: 5,
  },
  sectionHeader: {
    alignItems: "center",
    justifyContent: "space-between",
  },
  forumDesc: {
    marginLeft: 10,
  }, 
  forumInfo: {
    alignItems: "center",
  },
  forumCover: {

  },
  nickname: {
    marginBottom: 5
  },
  updateTime: {
    fontSize: 12,
  },
  viewCount: {
    fontSize: 12,
  },
  commentCount: {
    fontSize: 12,
  },
  forumName: {
    fontSize: 20,
    marginBottom: 5
  },
  forumStat: {
    marginRight: 10,
  },
  followBtn: {
    width: 50,
    height: 30,
  },
  divider: {
    marginTop: 10,
    marginBottom: 10,
  },

  flatList: {
    marginTop: 4,
  },

  itemWrap: {
    marginBottom: 3,
    paddingTop: 10,
    paddingBottom: 10,
  },
  itemContentWrap: {
    paddingLeft: 34,
  },
  itemSeparator: {
    display: "flex",
    height: 1,
    backgroundColor: "#ddd"
  },
  arrow: {
    position: "absolute",
    right: 0
  },
  countWrap: {
    alignItems: "center",
    marginLeft: 5,
  },
  contentWrap: {
    paddingTop: 10,
    paddingBottom: 10,

  },
  floorWrap: {
    paddingLeft: 80,
  },
  detailAttachmentImage: {
    height: 150
  },
  topicFilter: {
    justifyContent: "space-between",
    alignItems: "center",
    paddingTop: 5,
    paddingBottom: 5,
    borderBottomColor: "#eee",
    borderBottomWidth: 1,
  },
  topicFilterActive: {
    borderBottomWidth: 1,
    borderBottomColor: "#000",
  },
  topicFilterOrder: {
    alignItems: "center",
  },
  mainFloorInfoHeader: {
    justifyContent: "space-between"
  },
  commentCommentWrap: {
    backgroundColor: "#eee",
    padding: 10,
    marginTop:10,
  },
  commentCommentContent: {
    flexWrap: "wrap",
    marginBottom: 10,
  },
  textInputWrap: {
    height: 40,
  },
  textInput: {
    width: "88%",
    padding: 10,
    textAlignVertical: "top",
    backgroundColor: "#eee",
  },
  submitBtn: {
    display: "flex",
    width: "12%",
    justifyContent: "center",
    alignItems: "center",
  },
  loadingMore: {
    paddingVertical: 20,
    borderTopWidth: 1,
    borderColor: "#CED0CE"
  }

})

export default CommentList;